<template slot-scope="props">
  <div>
    <el-table :data="packagesData" :show-header="false" style="padding: 0 0 0 50px">
      <el-table-column type="expand">
        <template slot-scope="rows">
          <el-form label-position="left" label-width="60px" class="demo-table-expand" style="padding: 0 0 0 50px">
            <el-form-item label="链接">
              <span>{{ rows.row.url }}</span>
            </el-form-item>
            <el-form-item label="版本">
              <el-button class="version-btn" v-for="item in rows.row.versions" :key="item.name" type="success" size="mini" plain>
                {{ item.name }}
              </el-button>
            </el-form-item>
            <el-form-item>
              <!--<el-button type="warning" size="mini" icon="el-icon-refresh">更新</el-button>-->
              <el-button type="danger" size="mini" icon="el-icon-delete" @click="DeletePackage(rows.row.id)">删除</el-button>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="分类" prop="name"></el-table-column>
      <el-table-column label="日期" width="250px">
        <template slot-scope="rows">
          <el-tag size="mini" type="warning">{{ rows.row.updated_at }}</el-tag>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: "SatisPackages",
  props: {
    include_id: Number
  },
  data() {
    return {
      packagesData: [],
    }
  },
  methods: {
    GetPackages() {
      axios({
        url: '/collector/packages/all-by-include',
        method: 'post',
        data: {
          include_id: this.include_id
        }
      }).then(({data}) => {
        data.data.packages.forEach(function (v) {
          v['versions'] = data.data.versions[v.id]
        })
        this.packagesData = data.data.packages
      }).catch(err => {
        this.$notify({
          title: '失败',
          message: err.message,
          type: 'error'
        })
      })
    },
    DeletePackage(pkgId) {
      axios({
        url: '/collector/packages/del',
        method: 'post',
        data: {
          id: pkgId
        }
      }).then(() => {
        this.GetPackages()
      }).catch(err => {
        this.$notify({
          title: '失败',
          message: err.message,
          type: 'error'
        })
      })
    },
  },
  mounted() {
    this.GetPackages()
  }
}
</script>

<style scoped>
.el-table {
  border-radius: 10px;
  border: black 1px;
}

.el-table__expanded-cell {
  background-color: #ededed;
}

.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 90%;
}

.version-btn {
  margin: 0 10px 0 0 !important;
}
</style>